<template>
  <div>
    <el-button
      type="primary"
      :icon="Plus"
      @click="clickAddSpu"
      :disabled="!category3Id"
      >添加SPU</el-button
    >

    <el-table :data="list" border style="margin: 20px 0">
      <el-table-column
        label="序号"
        type="index"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            title="添加SKU"
            @click="clickAddSku(row)"
          ></el-button>

          <el-button
            type="primary"
            :icon="Edit"
            size="small"
            title="修改SPU"
            @click="clickUpdateSpu(row)"
          ></el-button>

          <el-button
            @click="showSkuList(row)"
            type="info"
            :icon="InfoFilled"
            size="small"
            title="查看SKU列表"
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            title="删除SPU"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getList"
      @size-change="getList"
    />

    <el-dialog :title="`${spu?.spuName} => SKU列表`" v-model="isShowDialog">
      <el-table :data="skuList" v-loading="skuLoading">
        <el-table-column property="skuName" label="名称"></el-table-column>
        <el-table-column property="price" label="价格(元)"></el-table-column>
        <el-table-column property="weight" label="重量(KG)"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.skuDefaultImg"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SpuList',
};
</script>

<script lang="ts" setup>
import type { SkuListModel } from '@/api/product/model/skuModel';
import type { SpuListModel, SpuModel } from '@/api/product/model/spuModel';
import { findSkuListBySpuIdApi } from '@/api/product/sku';
import { getSpuListApi } from '@/api/product/spu';
import { useCategoryStore } from '@/stores/category';
import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
import { ShowStatus } from '../types';

// 定义要分发的自定义事件
// defineEmits(['setShowStatus'])  // 无法约束传递的数据结构

// 声明定义自定义事件, 返回的是分发事件的函数
const emit = defineEmits<{
  (e: 'setShowStatus', value: ShowStatus): void;
  (e: 'setSpu', value: SpuModel): void;
}>();

// 在TS中分发事件事件
// emit('setShowStatus', ShowStatus.SPU_FORM)

/* SKU列表 start */
const isShowDialog = ref(false);
const spu = ref<SpuModel>();
const skuLoading = ref(false);
const skuList = ref<SkuListModel>([]);

// 显示指定spu下的sku列表
const showSkuList = async (row: SpuModel) => {
  isShowDialog.value = true;
  spu.value = row;
  skuLoading.value = true;
  skuList.value = [];
  // 发请求
  skuList.value = await findSkuListBySpuIdApi(row.id as number);
  skuLoading.value = false;
};

/* SKU列表 end */

// 点击添加spu
const clickAddSpu = () => {
  // 显示Spu修改的Form
  emit('setShowStatus', ShowStatus.SPU_FORM);
  // 传递新创建的spu,
  emit('setSpu', {
    category3Id: category3Id.value, // 一定要带上
    description: '',
    spuName: '',
    tmId: undefined,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

// 点击修改spu
const clickUpdateSpu = (row: SpuModel) => {
  // 显示Spu修改的Form
  emit('setShowStatus', ShowStatus.SPU_FORM);
  // 传递选择的spu, 当前就是row
  emit('setSpu', {
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};
// 点击添加sku
const clickAddSku = (row: SpuModel) => {
  // 显示Sku添加的Form
  emit('setShowStatus', ShowStatus.SKU_FORM);
  // 传递选择的spu, 当前就是row
  emit('setSpu', {
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

/* spu分页列表 start */
const list = ref<SpuListModel>([]);
const total = ref(0);
const page = ref(1);
const limit = ref(3);

const { category3Id } = storeToRefs(useCategoryStore());
// 监视category3Id, 请求获取分页列表显示/清除列表
watch(
  category3Id,
  (value) => {
    // 有值, 发请求, 没有清除
    if (value) {
      getList();
    } else {
      list.value = [];
      total.value = 0;
    }
  },
  { immediate: true }
); // 初始化立即执行一次 => 从Form界面返回时能自动获取列表显示

// 请求显示当前分页列表
async function getList() {
  const result = await getSpuListApi({
    page: page.value,
    limit: limit.value,
    category3Id: category3Id.value!, // !指定表达式的值是非空(不是undefined或null)
  });
  list.value = result.records;
  total.value = result.total;
}
/* spu分页列表 end */
</script>

<style lang="scss" scoped></style>
